<div ng-controller="StencilController" ng-cloak="">
	<div class="subheader1 editor-toolbar" id="editor-header">
		<div class="btn-group">
			<div class="btn-toolbar pull-left" ng-controller="ToolbarController" ng-cloak>
				<button id="{{item.id}}" title="{{item.title | translate}}" ng-repeat="item in items" ng-switch
					on="item.type" class="btn btn-inverse" ng-class="{'separator': item.type == 'separator'}"
					ng-disabled="item.type == 'separator' || item.enabled == false"
					ng-click="toolbarButtonClicked($index)">
					<i ng-switch-when="button" ng-class="item.cssClass" class="toolbar-button" data-toggle="tooltip"
						title="{{item.title | translate}}"></i>
					<div class="toolbar-text">{{ item.name | translate }}</div>
					<div ng-switch-when="separator" ng-class="item.cssClass"></div>
				</button>
			</div>
		</div>
		<div class="btn-group pull-right" ng-show="!secondaryItems.length">
			<div class="btn-toolbar pull-right" ng-controller="ToolbarController">
				<button title="{{item.title | translate}}" ng-repeat="item in secondaryItems" ng-switch on="item.type"
					class="btn btn-inverse" ng-class="{'separator': item.type == 'separator'}"
					ng-disabled="item.type == 'separator'" ng-click="toolbarSecondaryButtonClicked($index)"
					id="{{item.id}}">
					<i ng-switch-when="button" ng-class="item.cssClass" class="toolbar-button" data-toggle="tooltip"
						title="{{item.title | translate}}"></i>
					<div ng-switch-when="separator" ng-class="item.cssClass"></div>
				</button>
			</div>
		</div>
	</div>
	<div class="full">
		<div class="row row-no-gutter">
			<div id="paletteHelpWrapper">
				<div class="stencils" id="paletteSection">
					<div ng-if="stencilItemGroups.length > 1">
						<div ng-repeat="group in stencilItemGroups">

							<ul ng-if="group.visible && group.items" class="stencil-group"
								ng-class="{collapsed: !group.expanded, 'first': $first}">
								<li ng-include="'editor-app/partials/stencil-item-template.html?version=6'"></li>
							</ul>

							<div ng-if="!group.items"
								ng-include="'editor-app/partials/root-stencil-item-template.html?version=6'"></div>

						</div>
					</div>
					<div ng-if="stencilItemGroups.length == 1">
						<ul class="stencil-group">
							<li ng-repeat="item in stencilItemGroups[0].paletteItems" class="stencil-item"
								id="{{item.id}}" title="{{item.description | translate}}" ng-model="draggedElement"
								data-drag="true" jqyoui-draggable="{onStart:'startDragCallback', onDrag:'dragCallback'}"
								data-jqyoui-options="{revert: 'invalid', helper: 'clone', opacity : 0.5}">
								<img ng-if="!item.customIcon"
									ng-src="editor-app/stencilsets/{{getStencilSetName()}}/icons/{{item.icon}}"
									width="16px;" height="16px;" /> <img ng-if="item.customIcon"
									ng-src="{{getImageUrl(item.icon)}}" width="16px;" height="16px;" />
								{{item.name | translate}}
							</li>
						</ul>
					</div>
				</div>
				<!-- <div id="process-treeview-wrapper" ng-controller="ProcessNavigatorController">
                    <div class="process-treeview-header">
                        Process Navigator
                    </div>
                    <div class="process-treeview-body" ng-show="isEditorReady">
                        <div class="process-treeview-process-title" title="{{treeview.id}}" ng-class="{'current-process': treeview.current}" >
                            Process: {{treeview.name}}
                            <img ng-show="!treeview.current" ng-src="editor-app/images/pencil.png" class="pull-right" ng-click="edit(treeview.id)" />
                        </div>
                        <ul class="process-treeview-list" ng-if="treeview.children">
                            <li ng-repeat="child in treeview.children" ng-include="'editor-app/partials/process-tree-list.html?version=4'">
                            </li>
                        </ul>
                        <div ng-if="!treeview.children || treeview.children.length == 0" style="padding-left: 5px;">
                            No structural elements used.
                        </div>
                    </div>
              </div> -->
				<!-- <div id="paletteSectionFooter">
					<i class="glyphicon glyphicon-chevron-left"></i>
				</div> -->
			</div>
			<div id="contentCanvasWrapper">
				<!-- <div id="paletteSectionOpen" class="hicanvasSectiondden">
					<i class="glyphicon glyphicon-chevron-right"></i>
				</div> -->
				<div id="canvasHelpWrapper" class="col-xs-12">
					<div id="canvasSection" class="canvas-wrapper" ng-model="droppedElement" data-drop="true"
						data-jqyoui-options
						jqyoui-droppable="{onDrop:'dropCallback',onOver: 'overCallback', onOut: 'outCallback'}">
						<div class="canvas-message" id="model-modified-date"></div>
						<div class="Oryx_button" id="delete-button"
							title="{{'BUTTON.ACTION.DELETE.TOOLTIP' | translate}}" ng-click="deleteShape()"
							style="display: none">
							<img src="editor-app/images/delete.png" />
						</div>
						<div class="Oryx_button" id="morph-button" title="{{'BUTTON.ACTION.MORPH.TOOLTIP' | translate}}"
							ng-click="morphShape()" style="display: none">
							<img src="editor-app/images/wrench.png" />
						</div>
						<div class="Oryx_button" id="edit-button" style="display: none" ng-click="editShape()">
							<img src="editor-app/images/pencil.png" />
						</div>
						<div class="Oryx_button" ng-repeat="item in quickMenuItems" id="{{item.id}}"
							title="{{item.description}}" ng-click="quickAddItem(item.id)" ng-model="draggedElement"
							data-drag="true"
							jqyoui-draggable="{onStart:'startDragCallbackQuickMenu', onDrag:'dragCallbackQuickMenu'}"
							data-jqyoui-options="{revert: 'invalid', helper: 'clone', opacity : 0.5}"
							style="display: none">
							<img ng-src="editor-app/stencilsets/{{getStencilSetName()}}/icons/{{item.icon}}" />
						</div>
					</div>
				</div>
				<!-- 属性编辑区域 begin -->
				<div id="propertiesHelpWrapper">
					<div class="propertySection" id="propertySection"
						ng-class="{collapsed: propertyWindowState.collapsed}">
						<div class="selected-item-section">
							<!-- begin -->
							<div class="selected-item-body">
								<div ng-repeat="group in selectedItem.propGroups | orderBy: 'order'">
									<div class="property-group">
										<div class="property-group-title" ng-click="group.expanded = !group.expanded">
											<span>{{ group.name | translate }}</span>
											<i class="glyphicon glyphicon-chevron-right pull-right"
												ng-class="{'glyphicon-chevron-right pull-right': !group.expanded, 'glyphicon-chevron-down pull-right': group.expanded}"></i>
										</div>
										<div class="property-group-body" ng-class="{collapsed: !group.expanded}">
											<div class="property-row" ng-repeat="property in group.properties"
												 ng-class="{'clear' : $index%2 == 0}" ng-click="propertyClicked(property)">
												<span class="title"
													ng-if="!property.hidden">{{property.title }}&nbsp;:</span>
												<span class="title-removed" ng-if="property.hidden">
													<i>{{ property.title}}&nbsp;({{'PROPERTY.REMOVED' | translate}})&nbsp;:</i>
												</span>
												<span class="value" >
													<ng-include src="getPropertyTemplateUrl(property)"
														ng-if="!property.hasReadWriteMode"></ng-include>
													<ng-include src="getPropertyReadModeTemplateUrl(property)"
														ng-if="property.hasReadWriteMode && property.mode == 'read'">
													</ng-include>
													<ng-include src="getPropertyWriteModeTemplateUrl(property)"
														ng-if="property.hasReadWriteMode && property.mode == 'write'">
													</ng-include>
												</span>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- end -->
						</div>
					</div>
				</div>
				<!-- 属性编辑区域 end -->
			</div>
		</div>
	</div>
</div>